@use "sass:math";
@use "sass:color";

/**
 * 扩展配色方案
 * ----------------------
 * 结合 element-ui 和 lte-admin 的配色，
 * 这些颜色都比较鲜艳、饱满，能起到强调效果。
 *
 * default（默认）,info（信息），primary（强调）,success（成功）,warning（警告）,danger（危险），fatal（致命）
 * default：初始态，特殊场景下，需要一个状态能清除样式设计，比如：做 badge 的时候，有时候会期望以纯文本进行展示。
 * fatal：终结态，发生严重故障时候的状态。
 *
 * 关于命名规范，light-gray 确实可以简写成 lightgray，但是 light-yellow 不能简写，因此统一整理成下划线格式。
 */
:root {
  // 黑白灰三大基础色
  --sea-color-white: #fff; // 白色
  --sea-color-black: #000; // 黑色

  // 过去开发过程中，频繁用到 .text-gray 样式，推荐换成 .text-regular 这样的样式
  // 后续如果需要实现，切换风格时候，整体风格不会发生影响
  --sea-color-light-gray: #B1B3B7; // 灰色（浅）
  --sea-color-dark-gray: #5F656C; // 灰色（深）

  /**
   * 组件基本配色方案
   * ----------------------
   * 沿用 element-ui 的配色方案
   * 这些颜色相对淡一些，适合浅色主题
   */
  --sea-color-gray: #909399;
  --sea-color-gray-light-3: #B1B3B7;
  --sea-color-gray-light-5: #C7C9CC;
  --sea-color-gray-light-7: #DDDEE0;
  --sea-color-gray-light-8: #E8E9EA;
  --sea-color-gray-light-9: #F3F4F4;
  --sea-color-gray-dark-2: #5F656C;

  --sea-color-primary: #409eff;
  --sea-color-primary-light-3: rgb(121, 187, 255);
  --sea-color-primary-light-5: rgb(159, 206, 255);
  --sea-color-primary-light-7: rgb(197, 225, 255);
  --sea-color-primary-light-8: rgb(216, 235, 255);
  --sea-color-primary-light-9: rgb(235, 245, 255);
  --sea-color-primary-dark-2: rgb(51, 126, 204);

  --sea-color-success: #67c23a;
  --sea-color-success-light-3: rgb(148, 212, 117);
  --sea-color-success-light-5: rgb(179, 224, 156);
  --sea-color-success-light-7: rgb(209, 236, 195);
  --sea-color-success-light-8: rgb(224, 242, 215);
  --sea-color-success-light-9: rgb(239, 248, 235);
  --sea-color-success-dark-2: rgb(82, 155, 46);

  --sea-color-warning: #e6a23c;
  --sea-color-warning-light-3: rgb(237, 189, 118);
  --sea-color-warning-light-5: rgb(242, 208, 157);
  --sea-color-warning-light-7: rgb(247, 227, 196);
  --sea-color-warning-light-8: rgb(250, 236, 216);
  --sea-color-warning-light-9: rgb(252, 245, 235);
  --sea-color-warning-dark-2: rgb(184, 129, 48);

  --sea-color-danger: #f56c6c;
  --sea-color-danger-light-3: rgb(248, 152, 152);
  --sea-color-danger-light-5: rgb(250, 181, 181);
  --sea-color-danger-light-7: rgb(252, 210, 210);
  --sea-color-danger-light-8: rgb(253, 225, 225);
  --sea-color-danger-light-9: rgb(254, 240, 240);
  --sea-color-danger-dark-2: rgb(196, 86, 86);

  // 前景色 - 文字
  --sea-text-color-primary: #303133;
  --sea-text-color-regular: #606266;
  --sea-text-color-secondary: #909399;
  --sea-text-color-placeholder: #a8abb2;
  --sea-text-color-disabled: #c0c4cc;

  // 背景色 - 各类面板的颜色
  --sea-fill-color-extra-light: #FAFCFF;
  --sea-fill-color-lighter: #FAFAFA;
  --sea-fill-color-light: #F5F7FA;
  --sea-fill-color: #F0F2F5;
  --sea-fill-color-dark: #EBEDF0;
  --sea-fill-color-darker: #E6E8EB;
  --sea-fill-color-blank: #FFF;

  // 面板边框 - 按钮、盒模型
  --sea-border-color-extra-light: #f2f6fc;
  --sea-border-color-lighter: #ebeef5;
  --sea-border-color-light: #e4e7ed;
  --sea-border-color: #dcdfe6;
  --sea-border-color-dark: #d4d7de;
  --sea-border-color-darker: #cdd0d6;

  // 面板边框
  --sea-border-width: 1px;
  --sea-border-style: solid;
  --sea-border-color-hover: --sea-text-color-disabled;
  --sea-border: --sea-border-width --sea-border-style --sea-border-color;

  // 使用阴影作为边框 输入组件、按钮会用到
  --sea-border-shadow: 0 0 0 1px #dcdfe6 inset;

  // 边框圆角
  --sea-border-radius-base: 4px;
  --sea-border-radius-small: 2px;
  --sea-border-radius-round: 20px;
  --sea-border-radius-circle: 100%;

  // 组件阴影，强化视觉效果
  --sea-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
  --sea-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
  --sea-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
  --sea-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

  // 半透明：一些 .disabled .active 样式基于这个色彩
  --sea-overlay-color: rgba(0, 0, 0, 0.8);
  --sea-overlay-color-light: rgba(0, 0, 0, 0.7);
  --sea-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --sea-overlay-color-extra-lighter: rgba(0, 0, 0, 0.3);
  --sea-mask-color: rgba(255, 255, 255, 0.9);
  --sea-mask-color-light: rgba(255, 255, 255, 0.7);
  --sea-mask-color-lighter: rgba(255, 255, 255, 0.5);
  --sea-mask-color-extra-light: rgba(255, 255, 255, 0.3);

  // 通用禁用样式
  --sea-disabled-bg-color: --sea-fill-color-light;
  --sea-disabled-text-color: --sea-text-color-placeholder;
  --sea-disabled-border-color: --sea-border-color-light;

  // 通用面板背景色
  --sea-bg-color: #ffffff;
  --sea-bg-color-page: #f2f3f5;
  --sea-bg-color-overlay: #ffffff;

  // 动画持续特效时间 面板展开收缩动画
  --sea-transition-duration: 0.3s;
  --sea-transition-duration-fast: 0.2s;


  /**
   * 字体
   * ----------------------
   */
  // 字体大小
  --sea-font-size-extra-large: 20px;
  --sea-font-size-large: 18px;
  --sea-font-size-medium: 16px;
  --sea-font-size-base: 14px;
  --sea-font-size-small: 13px;
  --sea-font-size-extra-small: 12px;

  // 标题大小
  --sea-font-size-h1: math.floor((--sea-font-size-base * 2.6)); // ~36px
  --sea-font-size-h2: math.floor((--sea-font-size-base * 2.15)); // ~30px
  --sea-font-size-h3: math.ceil((--sea-font-size-base * 1.7)); // ~24px
  --sea-font-size-h4: math.ceil((--sea-font-size-base * 1.25)); // ~18px
  --sea-font-size-h5: --sea-font-size-base;
  --sea-font-size-h6: math.ceil((--sea-font-size-base * 0.85)); // ~12px

  // 字体行高
  --sea-line-height-base: 1.428571429; // 20/14
  // 字体外边框
  --sea-line-height-margin-top: math.floor((--sea-font-size-base * --sea-line-height-base)); // ~20px
  // h5-h6 的 margin
  --sea-line-height-margin-computed: math.div(--sea-line-height-margin-top, 2);

  // 挺好用的免费字体
  //font-family: Arial, sans-serif;

  // adobe 公司提供的免费字体，广泛用于各种商业用途‌，英文会有较好展示效果
  //--sea-font-family: 'Source Sans Pro', sans-serif;

  // element-ui 同款字体设计
  --sea-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

  // 用于查看代码的字体（注意不可商用，用于制作开发辅助工具，与业务无关）
  --sea-font-family-code: 'Consolas', sans-serif;

  // 黑体、宋体、仿宋、隶书、楷体等基本字体是完全开源的，可以在任何场合免费使用而不会侵权‌
  //--sea-font-family: '黑体';

  // Consolas 是 eclipse 默认字体，适合用来看代码，不过不要商用
  //--sea-font-family: 'Consolas';

  // element-plus 推荐字体
  //--sea-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;


  /**
   * General: Box
   * ----------------------
   * 盒模型微调属性
   */
  --sea-margin-vertical-larger: 18px;
  --sea-margin-vertical-large: 14px;
  --sea-margin-vertical: 10px;
  --sea-margin-vertical-small: 6px;
  --sea-margin-vertical-smaller: 2px;

  --sea-margin-horizontal-larger: 18px;
  --sea-margin-horizontal-large: 14px;
  --sea-margin-horizontal: 10px;
  --sea-margin-horizontal-small: 6px;
  --sea-margin-horizontal-smaller: 2px;

  --sea-margin-larger: --sea-margin-vertical-larger --sea-margin-horizontal-larger;
  --sea-margin-large: --sea-margin-vertical-large --sea-margin-horizontal-large;
  --sea-margin: --sea-margin-vertical --sea-margin-horizontal;
  --sea-margin-small: --sea-margin-vertical-small --sea-margin-horizontal-small;
  --sea-margin-smaller: --sea-margin-vertical-smaller --sea-margin-horizontal-smaller;

  --sea-padding-horizontal-larger: 18px;
  --sea-padding-horizontal-large: 14px;
  --sea-padding-horizontal: 10px;
  --sea-padding-horizontal-small: 6px;
  --sea-padding-horizontal-smaller: 2px;

  --sea-padding-vertical-larger: 18px;
  --sea-padding-vertical-large: 14px;
  --sea-padding-vertical: 10px;
  --sea-padding-vertical-small: 6px;
  --sea-padding-vertical-smaller: 2px;

  --sea-padding-larger: --sea-padding-vertical-larger --sea-padding-horizontal-larger;
  --sea-padding-large: --sea-padding-vertical-large --sea-padding-horizontal-large;
  --sea-padding: --sea-padding-vertical --sea-padding-horizontal;
  --sea-padding-small: --sea-padding-vertical-small --sea-padding-horizontal-small;
  --sea-padding-smaller: --sea-padding-vertical-smaller --sea-padding-horizontal-smaller;

  /**
   * 盒模型间隙
   * --------------------
   * 给组件添加 margin，将元素分隔开，去除最后一个的 margin；
   * 在我们的组件中，大部分都不包含默认边框设计，这个样式会非常有用。
   */
  --sea-gap-width: --sea-margin-horizontal;
  --sea-gap-height: --sea-margin-vertical;

  /**
   * 盒模型大小
   * --------------------------------------------
   * 单行输入框、下拉框、按钮等大小，需要对齐大小
   */
  --sea-box-height-small: 24px;
  --sea-box-height: 32px;
  --sea-box-height-large: 40px;
}

.btn-info {
  --sea-btn-text-color: var(--sea-color-white);
  --sea-btn-bg-color: var(--sea-color-gray);
  --sea-btn-border-color: var(--sea-color-gray);
  --sea-btn-outline-color: var(--sea-color-gray-light-5);
  --sea-btn-active-color: var(--sea-color-gray-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-gray-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-gray-light-3);
  --sea-btn-hover-border-color: var(--sea-color-gray-light-3);
  --sea-btn-active-bg-color: var(--sea-color-gray-dark-2);
  --sea-btn-active-border-color: var(--sea-color-gray-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-white);
  --sea-btn-disabled-bg-color: var(--sea-color-gray-light-5);
  --sea-btn-disabled-border-color: var(--sea-color-gray-light-5);
}

.btn-primary {
  --sea-btn-text-color: var(--sea-color-white);
  --sea-btn-bg-color: var(--sea-color-primary);
  --sea-btn-border-color: var(--sea-color-primary);
  --sea-btn-outline-color: var(--sea-color-primary-light-5);
  --sea-btn-active-color: var(--sea-color-primary-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-primary-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-primary-light-3);
  --sea-btn-hover-border-color: var(--sea-color-primary-light-3);
  --sea-btn-active-bg-color: var(--sea-color-primary-dark-2);
  --sea-btn-active-border-color: var(--sea-color-primary-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-white);
  --sea-btn-disabled-bg-color: var(--sea-color-primary-light-5);
  --sea-btn-disabled-border-color: var(--sea-color-primary-light-5);
}

.btn-success {
  --sea-btn-text-color: var(--sea-color-white);
  --sea-btn-bg-color: var(--sea-color-success);
  --sea-btn-border-color: var(--sea-color-success);
  --sea-btn-outline-color: var(--sea-color-success-light-5);
  --sea-btn-active-color: var(--sea-color-success-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-success-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-success-light-3);
  --sea-btn-hover-border-color: var(--sea-color-success-light-3);
  --sea-btn-active-bg-color: var(--sea-color-success-dark-2);
  --sea-btn-active-border-color: var(--sea-color-success-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-white);
  --sea-btn-disabled-bg-color: var(--sea-color-success-light-5);
  --sea-btn-disabled-border-color: var(--sea-color-success-light-5);
}

.btn-warning {
  --sea-btn-text-color: var(--sea-color-white);
  --sea-btn-bg-color: var(--sea-color-warning);
  --sea-btn-border-color: var(--sea-color-warning);
  --sea-btn-outline-color: var(--sea-color-warning-light-5);
  --sea-btn-active-color: var(--sea-color-warning-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-warning-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-warning-light-3);
  --sea-btn-hover-border-color: var(--sea-color-warning-light-3);
  --sea-btn-active-bg-color: var(--sea-color-warning-dark-2);
  --sea-btn-active-border-color: var(--sea-color-warning-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-white);
  --sea-btn-disabled-bg-color: var(--sea-color-warning-light-5);
  --sea-btn-disabled-border-color: var(--sea-color-warning-light-5);
}

.btn-danger {
  --sea-btn-text-color: var(--sea-color-white);
  --sea-btn-bg-color: var(--sea-color-danger);
  --sea-btn-border-color: var(--sea-color-danger);
  --sea-btn-outline-color: var(--sea-color-danger-light-5);
  --sea-btn-active-color: var(--sea-color-danger-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-danger-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-danger-light-3);
  --sea-btn-hover-border-color: var(--sea-color-danger-light-3);
  --sea-btn-active-bg-color: var(--sea-color-danger-dark-2);
  --sea-btn-active-border-color: var(--sea-color-danger-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-white);
  --sea-btn-disabled-bg-color: var(--sea-color-danger-light-5);
  --sea-btn-disabled-border-color: var(--sea-color-danger-light-5);
}

.btn-plain {
  --sea-btn-text-color: var(--sea-text-color-regular);
  --sea-btn-bg-color: var(--sea-color-white);
  --sea-btn-border-color: var(--sea-border-color);
  --sea-btn-outline-color: var(--sea-color-gray-light-5);
  --sea-btn-active-color: var(--sea-color-gray-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-primary);
  --sea-btn-hover-link-text-color: var(--sea-color-gray-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-white);
  --sea-btn-hover-border-color: var(--sea-color-primary);
  --sea-btn-active-bg-color: var(--sea-color-gray-dark-2);
  --sea-btn-active-border-color: var(--sea-color-gray-dark-2);
  --sea-btn-disabled-text-color: var(--sea-text-color-disabled);
  --sea-btn-disabled-bg-color: var(--sea-color-white);
  --sea-btn-disabled-border-color: var(--sea-btn-disabled-border-color);
}

.btn-plain-info {
  --sea-btn-text-color: var(--sea-text-color-regular);
  --sea-btn-bg-color: var(--sea-color-white);
  --sea-btn-border-color: var(--sea-color-gray);
  --sea-btn-outline-color: var(--sea-color-gray-light-5);
  --sea-btn-active-color: var(--sea-color-gray-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-gray-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-gray);
  --sea-btn-hover-border-color: var(--sea-color-gray-light-3);
  --sea-btn-active-bg-color: var(--sea-color-gray-dark-2);
  --sea-btn-active-border-color: var(--sea-color-gray-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-gray-light-5);
  --sea-btn-disabled-bg-color: var(--sea-color-gray-light-9);
  --sea-btn-disabled-border-color: var(--sea-color-gray-light-8);
}

.btn-plain-primary {
  --sea-btn-text-color: var(--sea-color-primary);
  --sea-btn-bg-color: var(--sea-color-white);
  --sea-btn-border-color: var(--sea-color-primary);
  --sea-btn-outline-color: var(--sea-color-primary-light-5);
  --sea-btn-active-color: var(--sea-color-primary-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-primary-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-primary);
  --sea-btn-hover-border-color: var(--sea-color-primary-light-3);
  --sea-btn-active-bg-color: var(--sea-color-primary-dark-2);
  --sea-btn-active-border-color: var(--sea-color-primary-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-primary-light-5);
  --sea-btn-disabled-bg-color: var(--sea-color-primary-light-9);
  --sea-btn-disabled-border-color: var(--sea-color-primary-light-8);
}

.btn-plain-success {
  --sea-btn-text-color: var(--sea-color-success);
  --sea-btn-bg-color: var(--sea-color-white);
  --sea-btn-border-color: var(--sea-color-success);
  --sea-btn-outline-color: var(--sea-color-success-light-5);
  --sea-btn-active-color: var(--sea-color-success-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-success-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-success);
  --sea-btn-hover-border-color: var(--sea-color-success-light-3);
  --sea-btn-active-bg-color: var(--sea-color-success-dark-2);
  --sea-btn-active-border-color: var(--sea-color-success-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-success-light-5);
  --sea-btn-disabled-bg-color: var(--sea-color-success-light-9);
  --sea-btn-disabled-border-color: var(--sea-color-success-light-8);
}

.btn-plain-warning {
  --sea-btn-text-color: var(--sea-color-warning);
  --sea-btn-bg-color: var(--sea-color-white);
  --sea-btn-border-color: var(--sea-color-warning);
  --sea-btn-outline-color: var(--sea-color-warning-light-5);
  --sea-btn-active-color: var(--sea-color-warning-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-warning-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-warning);
  --sea-btn-hover-border-color: var(--sea-color-warning-light-3);
  --sea-btn-active-bg-color: var(--sea-color-warning-dark-2);
  --sea-btn-active-border-color: var(--sea-color-warning-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-warning-light-5);
  --sea-btn-disabled-bg-color: var(--sea-color-warning-light-9);
  --sea-btn-disabled-border-color: var(--sea-color-warning-light-8);
}

.btn-plain-danger {
  --sea-btn-text-color: var(--sea-color-danger);
  --sea-btn-bg-color: var(--sea-fill-danger);
  --sea-btn-border-color: var(--sea-color-danger);
  --sea-btn-outline-color: var(--sea-color-danger-light-5);
  --sea-btn-active-color: var(--sea-color-danger-dark-2);
  --sea-btn-hover-text-color: var(--sea-color-white);
  --sea-btn-hover-link-text-color: var(--sea-color-danger-light-5);
  --sea-btn-hover-bg-color: var(--sea-color-danger);
  --sea-btn-hover-border-color: var(--sea-color-danger-light-3);
  --sea-btn-active-bg-color: var(--sea-color-danger-dark-2);
  --sea-btn-active-border-color: var(--sea-color-danger-dark-2);
  --sea-btn-disabled-text-color: var(--sea-color-danger-light-5);
  --sea-btn-disabled-bg-color: var(--sea-color-danger-light-9);
  --sea-btn-disabled-border-color: var(--sea-color-danger-light-8);
}

.box-info {
  --sea-box-text-color: var(--sea-text-color-regular);
  --sea-box-bg-color: var(--sea-color-gray-light-9);
  --sea-box-border-color: var(--sea-color-gray-light-5);
  --sea-box-outline-color: var(--sea-color-gray-light-3);

  --sea-box-hover-text-color: var(--sea-text-color-regular);
  --sea-box-hover-link-text-color: var(--sea-color-gray-light-5);
  --sea-box-hover-bg-color: var(--sea-color-gray-light-8);
  --sea-box-hover-border-color: var(--sea-color-gray-light-5);

  --sea-box-active-color: var(--sea-color-gray-dark-2);
  --sea-box-active-bg-color: var(--sea-color-gray-light-9);
  --sea-box-active-border-color: var(--sea-color-gray);

  --sea-box-disabled-text-color: var(--sea-color-gray-light-5);
  --sea-box-disabled-bg-color: var(--sea-color-gray-light-9);
  --sea-box-disabled-border-color: var(--sea-color-gray-light-8);
}

.box-primary {
  --sea-box-text-color: var(--sea-color-primary);
  --sea-box-bg-color: var(--sea-color-primary-light-9);
  --sea-box-border-color: var(--sea-color-primary-light-5);
  --sea-box-outline-color: var(--sea-color-primary-light-3);

  --sea-box-hover-text-color: var(--sea-color-primary);
  --sea-box-hover-link-text-color: var(--sea-color-primary-light-5);
  --sea-box-hover-bg-color: var(--sea-color-primary-light-8);
  --sea-box-hover-border-color: var(--sea-color-primary-light-5);

  --sea-box-active-color: var(--sea-color-primary-dark-2);
  --sea-box-active-bg-color: var(--sea-color-primary-light-9);
  --sea-box-active-border-color: var(--sea-color-primary);

  --sea-box-disabled-text-color: var(--sea-color-primary-light-5);
  --sea-box-disabled-bg-color: var(--sea-color-primary-light-9);
  --sea-box-disabled-border-color: var(--sea-color-primary-light-8);
}


.box-success {
  --sea-box-text-color: var(--sea-color-success);
  --sea-box-bg-color: var(--sea-color-success-light-9);
  --sea-box-border-color: var(--sea-color-success-light-5);
  --sea-box-outline-color: var(--sea-color-success-light-3);

  --sea-box-hover-text-color: var(--sea-color-success);
  --sea-box-hover-link-text-color: var(--sea-color-success-light-5);
  --sea-box-hover-bg-color: var(--sea-color-success-light-8);
  --sea-box-hover-border-color: var(--sea-color-success-light-5);

  --sea-box-active-color: var(--sea-color-success-dark-2);
  --sea-box-active-bg-color: var(--sea-color-success-light-9);
  --sea-box-active-border-color: var(--sea-color-success);

  --sea-box-disabled-text-color: var(--sea-color-success-light-5);
  --sea-box-disabled-bg-color: var(--sea-color-success-light-9);
  --sea-box-disabled-border-color: var(--sea-color-success-light-8);
}

.box-warning {
  --sea-box-text-color: var(--sea-color-warning);
  --sea-box-bg-color: var(--sea-color-warning-light-9);
  --sea-box-border-color: var(--sea-color-warning-light-5);
  --sea-box-outline-color: var(--sea-color-warning-light-3);

  --sea-box-hover-text-color: var(--sea-color-warning);
  --sea-box-hover-link-text-color: var(--sea-color-warning-light-5);
  --sea-box-hover-bg-color: var(--sea-color-warning-light-8);
  --sea-box-hover-border-color: var(--sea-color-warning-light-5);

  --sea-box-active-color: var(--sea-color-warning-dark-2);
  --sea-box-active-bg-color: var(--sea-color-warning-light-9);
  --sea-box-active-border-color: var(--sea-color-warning);

  --sea-box-disabled-text-color: var(--sea-color-warning-light-5);
  --sea-box-disabled-bg-color: var(--sea-color-warning-light-9);
  --sea-box-disabled-border-color: var(--sea-color-warning-light-8);
}

.box-danger {
  --sea-box-text-color: var(--sea-color-danger);
  --sea-box-bg-color: var(--sea-color-danger-light-9);
  --sea-box-border-color: var(--sea-color-danger-light-5);
  --sea-box-outline-color: var(--sea-color-danger-light-3);

  --sea-box-hover-text-color: var(--sea-color-danger);
  --sea-box-hover-link-text-color: var(--sea-color-danger-light-5);
  --sea-box-hover-bg-color: var(--sea-color-danger-light-8);
  --sea-box-hover-border-color: var(--sea-color-danger-light-5);

  --sea-box-active-color: var(--sea-color-danger-dark-2);
  --sea-box-active-bg-color: var(--sea-color-danger-light-9);
  --sea-box-active-border-color: var(--sea-color-danger);

  --sea-box-disabled-text-color: var(--sea-color-danger-light-5);
  --sea-box-disabled-bg-color: var(--sea-color-danger-light-9);
  --sea-box-disabled-border-color: var(--sea-color-danger-light-8);
}
